<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能AI育儿助手</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="container">
            <div class="logo">
                <i class="fas fa-baby"></i>
                <span>智能AI育儿助手</span>
            </div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#articles">文章中心</a></li>
                <li><a href="#features">功能介绍</a></li>
                <li><a href="#about">关于我们</a></li>
                <li><a href="#community">妈妈圈</a></li>
            </ul>
            <div class="user-actions">
                <button class="btn login-btn">登录</button>
                <button class="btn register-btn">注册</button>
            </div>
            <div class="hamburger">
                <i class="fas fa-bars"></i>
            </div>
        </div>
    </nav>

    <!-- 首页内容 -->
    <section id="home" class="hero">
        <div class="container">
            <div class="hero-content">
                <h1>智能AI育儿助手</h1>
                <p>专业、贴心的育儿指导，陪伴宝宝健康成长</p>
                <div class="cta-buttons">
                    <button class="btn primary-btn">立即体验</button>
                    <button class="btn secondary-btn">了解更多</button>
                </div>
            </div>
            <div class="hero-image">
                <img src="images/hero-image.svg" alt="育儿助手" class="svg-image">
            </div>
        </div>
    </section>

    <!-- 今日育儿Tip -->
    <section class="daily-tip">
        <div class="container">
            <div class="tip-header">
                <h3><i class="fas fa-lightbulb"></i> 今日育儿Tip</h3>
                <span class="date"></span>
            </div>
            <div class="tip-content">
                <p>如何应对宝宝的分离焦虑？尝试逐渐延长离开时间，保持平静的情绪，给宝宝留下安抚物品，这些方法可以有效缓解分离焦虑。</p>
                <a href="#" class="read-more">查看详情</a>
            </div>
        </div>
    </section>

    <!-- 精选专题 -->
    <section class="featured-topics">
        <div class="container">
            <h2>精选专题</h2>
            <div class="topics-grid">
                <div class="topic-card">
                    <img src="images/topic1.svg" alt="新生儿护理入门指南" class="svg-image">
                    <h3>新生儿护理入门指南</h3>
                    <p>从出生到满月，新手父母必备的护理知识</p>
                    <a href="#" class="view-topic">查看专题</a>
                </div>
                <div class="topic-card">
                    <img src="images/topic2.svg" alt="辅食添加全攻略" class="svg-image">
                    <h3>辅食添加全攻略</h3>
                    <p>6个月开始的辅食之旅，科学喂养不迷茫</p>
                    <a href="#" class="view-topic">查看专题</a>
                </div>
                <div class="topic-card">
                    <img src="images/topic3.svg" alt="睡眠引导指南" class="svg-image">
                    <h3>睡眠引导指南</h3>
                    <p>帮助宝宝建立良好的睡眠习惯，让全家都能好好休息</p>
                    <a href="#" class="view-topic">查看专题</a>
                </div>
            </div>
        </div>
    </section>

    <!-- 文章中心 -->
    <section id="articles" class="article-center">
        <div class="container">
            <h2>文章中心</h2>
            
            <!-- 按年龄分类 -->
            <div class="article-section">
                <h3>按年龄分类</h3>
                <div class="category-tabs">
                    <button class="tab-btn active">孕期</button>
                    <button class="tab-btn">0-3个月</button>
                    <button class="tab-btn">4-6个月</button>
                    <button class="tab-btn">7-12个月</button>
                    <button class="tab-btn">1-2岁</button>
                    <button class="tab-btn">2-3岁</button>
                </div>
            </div>

            <!-- 按专题分类 -->
            <div class="article-section">
                <h3>按专题分类</h3>
                <div class="category-cards">
                    <div class="category-card">
                        <i class="fas fa-utensils"></i>
                        <span>喂养营养</span>
                    </div>
                    <div class="category-card">
                        <i class="fas fa-moon"></i>
                        <span>睡眠引导</span>
                    </div>
                    <div class="category-card">
                        <i class="fas fa-heartbeat"></i>
                        <span>疾病护理</span>
                    </div>
                    <div class="category-card">
                        <i class="fas fa-puzzle-piece"></i>
                        <span>早教游戏</span>
                    </div>
                    <div class="category-card">
                        <i class="fas fa-brain"></i>
                        <span>行为心理</span>
                    </div>
                    <div class="category-card">
                        <i class="fas fa-shield-alt"></i>
                        <span>安全防护</span>
                    </div>
                </div>
            </div>

            <!-- 推荐文章 -->
            <div class="recommended-articles">
                <h3>推荐文章</h3>
                <div class="articles-list">
                    <div class="article-item">
                        <img src="images/article1.svg" alt="婴儿睡眠周期解析" class="svg-image">
                        <div class="article-info">
                            <h4>婴儿睡眠周期解析：为什么宝宝睡不安稳？</h4>
                            <p>了解婴儿的睡眠周期特点，掌握安抚技巧，让宝宝睡得更安稳...</p>
                            <div class="article-meta">
                                <span>0-6个月</span>
                                <span>睡眠引导</span>
                                <span>阅读量: 2.5k</span>
                            </div>
                        </div>
                    </div>
                    <div class="article-item">
                        <img src="images/article2.svg" alt="辅食添加注意事项" class="svg-image">
                        <div class="article-info">
                            <h4>辅食添加注意事项：从第一口到多样化</h4>
                            <p>详细介绍辅食添加的时间、顺序、种类以及常见问题解答...</p>
                            <div class="article-meta">
                                <span>6-12个月</span>
                                <span>喂养营养</span>
                                <span>阅读量: 1.8k</span>
                            </div>
                        </div>
                    </div>
                    <div class="article-item">
                        <img src="images/article3.svg" alt="宝宝红屁股护理" class="svg-image">
                        <div class="article-info">
                            <h4>宝宝红屁股护理：预防与应对</h4>
                            <p>红屁股是常见的婴儿皮肤问题，正确的护理方法可以有效预防和缓解...</p>
                            <div class="article-meta">
                                <span>0-1岁</span>
                                <span>疾病护理</span>
                                <span>阅读量: 3.2k</span>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn load-more">查看更多</button>
            </div>
        </div>
    </section>

    <!-- 功能介绍 -->
    <section id="features" class="features">
        <div class="container">
            <h2>AI育儿助手功能</h2>
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-comments"></i>
                    <h3>自然语言对话</h3>
                    <p>理解育儿相关问题，提供专业解答</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-file-alt"></i>
                    <h3>结构化回答</h3>
                    <p>核心结论、理论依据、实操步骤，一目了然</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-history"></i>
                    <h3>上下文理解</h3>
                    <p>记住对话历史，持续跟进话题</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-book"></i>
                    <h3>知识库推荐</h3>
                    <p>智能推荐相关专业文章</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 社区互动 -->
    <section id="community" class="community">
        <div class="container">
            <h2>妈妈圈</h2>
            <div class="community-tabs">
                <button class="tab-btn active">热门讨论</button>
                <button class="tab-btn">最新发布</button>
                <button class="tab-btn">精华内容</button>
            </div>
            <div class="community-posts">
                <div class="post-item">
                    <div class="post-header">
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="user-info">
                            <h4>小宝贝妈妈</h4>
                            <p>发布于 2小时前</p>
                        </div>
                    </div>
                    <div class="post-content">
                        <h4>【求助】两个月大宝宝夜醒频繁怎么办？</h4>
                        <p>我家宝宝刚满两个月，最近晚上总是醒很多次，有时一两个小时就醒一次，有经验的妈妈能分享一下经验吗？</p>
                    </div>
                    <div class="post-stats">
                        <span><i class="far fa-comment"></i> 25 回复</span>
                        <span><i class="far fa-thumbs-up"></i> 38 赞同</span>
                    </div>
                </div>
                <div class="post-item">
                    <div class="post-header">
                        <div class="user-avatar">
                            <i class="fas fa-user"></i>
                        </div>
                        <div class="user-info">
                            <h4>二宝妈妈</h4>
                            <p>发布于 昨天</p>
                        </div>
                    </div>
                    <div class="post-content">
                        <h4>分享我的辅食添加心得</h4>
                        <p>总结了我给两个宝宝添加辅食的经验，包括时间、顺序、注意事项等，希望对新手妈妈有帮助...</p>
                    </div>
                    <div class="post-stats">
                        <span><i class="far fa-comment"></i> 42 回复</span>
                        <span><i class="far fa-thumbs-up"></i> 102 赞同</span>
                    </div>
                </div>
            </div>
            <button class="btn create-post-btn">发布新帖</button>
        </div>
    </section>

    <!-- Newsletter订阅 -->
    <section class="newsletter">
        <div class="container">
            <h2>订阅育儿知识推送</h2>
            <p>根据宝宝月龄，每周推送定制化的育儿知识和提醒</p>
            <form class="newsletter-form">
                <input type="email" placeholder="请输入您的邮箱" required>
                <input type="text" placeholder="宝宝出生日期 (YYYY-MM-DD)" required>
                <button type="submit" class="btn primary-btn">立即订阅</button>
            </form>
        </div>
    </section>

    <!-- APP上线提醒 -->
    <section class="app-notify">
        <div class="container">
            <h3>APP即将上线，敬请期待！</h3>
            <p>留下您的邮箱，第一时间获取APP上线通知</p>
            <form class="app-notify-form">
                <input type="email" placeholder="请输入您的邮箱" required>
                <button type="submit" class="btn secondary-btn">提醒我</button>
            </form>
        </div>
    </section>

    <!-- 登录模态框 -->
    <div id="login-modal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户登录</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="login-form">
                    <div class="form-group">
                        <label for="login-email">邮箱地址</label>
                        <input type="email" id="login-email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="login-password">密码</label>
                        <input type="password" id="login-password" placeholder="请输入密码" required>
                    </div>
                    <div class="form-options">
                        <label><input type="checkbox"> 记住我</label>
                        <a href="#" class="forgot-password">忘记密码？</a>
                    </div>
                    <button type="submit" class="btn primary-btn full-width">登录</button>
                    <div class="form-footer">
                        <p>还没有账号？ <a href="#" class="switch-to-register">立即注册</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 注册模态框 -->
    <div id="register-modal" class="modal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-header">
                <h3>用户注册</h3>
                <button class="close-modal">&times;</button>
            </div>
            <div class="modal-body">
                <form id="register-form">
                    <div class="form-group">
                        <label for="register-name">昵称</label>
                        <input type="text" id="register-name" placeholder="请输入昵称" required>
                    </div>
                    <div class="form-group">
                        <label for="register-email">邮箱地址</label>
                        <input type="email" id="register-email" placeholder="请输入邮箱" required>
                    </div>
                    <div class="form-group">
                        <label for="register-password">密码</label>
                        <input type="password" id="register-password" placeholder="请设置密码" required>
                    </div>
                    <div class="form-group">
                        <label for="register-confirm">确认密码</label>
                        <input type="password" id="register-confirm" placeholder="请确认密码" required>
                    </div>
                    <div class="form-group">
                        <label for="baby-birthday">宝宝出生日期（选填）</label>
                        <input type="date" id="baby-birthday">
                    </div>
                    <div class="form-options">
                        <label><input type="checkbox" required> 我已阅读并同意<a href="#">服务条款</a>和<a href="#">隐私政策</a></label>
                    </div>
                    <button type="submit" class="btn primary-btn full-width">注册</button>
                    <div class="form-footer">
                        <p>已有账号？ <a href="#" class="switch-to-login">立即登录</a></p>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <i class="fas fa-baby"></i>
                    <span>智能AI育儿助手</span>
                </div>
                <div class="footer-links">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                        <li><a href="#">使用条款</a></li>
                        <li><a href="#">隐私政策</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h4>联系我们</h4>
                    <p><i class="fas fa-envelope"></i> contact@ai-babycare.com</p>
                    <p><i class="fas fa-phone"></i> 400-123-4567</p>
                </div>
                <div class="footer-social">
                    <h4>关注我们</h4>
                    <div class="social-icons">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 智能AI育儿助手 版权所有</p>
            </div>
        </div>
    </footer>

    <!-- AI聊天窗口 -->
    <div id="chat-widget" class="chat-widget">
        <div class="chat-header" onclick="toggleChat()">
            <div class="chat-icon">
                <i class="fas fa-robot"></i>
            </div>
            <div class="chat-title">
                <h4>AI育儿助手</h4>
                <p>点击咨询育儿问题</p>
            </div>
            <div class="chat-toggle">
                <i class="fas fa-chevron-up" id="chat-toggle-icon"></i>
            </div>
        </div>
        <div class="chat-container" id="chat-container">
            <div class="chat-messages" id="chat-messages">
                <div class="message ai-message">
                    <div class="message-content">
                        <p>您好！我是智能AI育儿助手，请问有什么育儿问题可以帮助您？</p>
                    </div>
                </div>
            </div>
            <div class="chat-input-container">
                <input type="text" id="chat-input" placeholder="请输入您的问题..." disabled>
                <button class="btn send-btn" disabled><i class="fas fa-paper-plane"></i></button>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/main.js"></script>
    <script src="js/chatbot.js"></script>
    <script src="js/utils.js"></script>
</body>
</html>